<template>
	<view class="box-c ">
		<view :class="popUpFlag?'mask':''" @click="open">

		</view>
		<scroll-view scroll-y :style="{height: this.shopHeight+'px'}">

			<view class="bg-pink" style="position:relative; height:280rpx;width: 750rpx;"></view>
			<view class="bg-light-secondary" style="position:relative; height:200rpx;width: 750rpx;"></view>
			<view class="bg-white rounded-20 ml-2 position-absolute card" style="height:300rpx;top: 8%;width: 710rpx;">
				<view class="box-c card2">
					<!-- 标题 -->
					<view class="box">
						<image :src="shopInfo.shopLogo" class="ml-4 shop-logo" style="" mode=""></image>
						<text class="shop-title" style="">{{shopInfo.shopName}}</text>
						<view class="phone-view">
							<view class="iconfont icondianhua phone" @tap="call">

							</view>
						</view>

					</view>
					<view class="box link">

					</view>
					<view class="box" style="margin-top: 20rpx;">
						<text class="iconfont iconshizhong icon"></text>
						<text class="desc">
							{{shopInfo.workTime}}
						</text>

					</view>
					<view class="box">
						<text class="iconfont iconweizhi icon"></text>
						<text class="desc">
							{{shopInfo.city}} {{shopInfo.district}} {{shopInfo.address}}
						</text>
						<text class="iconfont iconqianjin">
						</text>

					</view>


				</view>
				<view class="box d-jc-sb attract d-ai-c">
					<text>该商家有2个志愿者岗位招募</text>
					<text @tap='look'>点击查看</text>
				</view>

			</view>


			
			
			<view class="bottom1">
			</view>

		</scroll-view>

		<view class="popo animated box-c" :class=sty id="box" v-if="popUpFlag" style="animation-duration: 200ms">
			<view class="box d-jc-sb title">
				<view class="">
					<text>已选商品</text>
				</view>
				<view class="clear-cart">
					<text class="iconfont iconshanchu">
					</text>
					<text @tap='clearCart'>
						清空购物车
					</text>

				</view>

			</view>
			<view class="">
				<scroll-view scroll-y style="min-height: 150rpx;max-height: 700rpx;" class="">
					<view class="product-list" v-if='item.number>0' v-for="(item,index) in popUpList">
						<view class="box d-jc-sb">
							<view class="box">
								<view class="product-logo">
									<image :src="item.goodsLogo" mode=""></image>
								</view>
								<view class="box-c d-jc-sb product-name">
									<text>{{item.goodsName}}</text>
									<text>{{(item.goodsPrice)*(item.number)}}积分</text>
								</view>

							</view>
							<view class="box d-ai-end operation">
								<text class="iconfont iconminus-opp" @tap="addSubtractPopUpList(-1,item,index)"></text>
								<text>{{item.number}}</text>
								<text class="iconfont iconjia1" @tap="addSubtractPopUpList(+1,item,index)"></text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>


		</view>

		<view class="box-c d-ac-c bottom2" v-show="buttomFlag">
			<view class="bottom box d-flex animated fadeInUp">
				<view class="flex-1 bottom-list1 box">
					<image :src="cartActive ? cartActiveImage: cartImage" @click="open(cartActive,)" mode=""></image>
					<text v-if="cartActive">{{productNum}}</text>
				</view>
				<view class="flex-4 box-c bottom-list2">
					<text>￥{{(totalPrice).toFixed(2)}}</text>
					<text :class="!cartActive ? 'mini-price' :''">另需配送费用￥0</text>
				</view>
				<view class="flex-2  box d-jc-c d-ai-c" :class="cartActive ? 'bottom-list3' :'' "
					@tap="affirmOrder(cartActive,shopInfo.shopId)">
					<text :class="!cartActive ? 'mini-price' :''">
						提交订单
					</text>
				</view>
			</view>



		</view>
		
	</view>
</template>

<script>
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			hansTabber
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				shopHeight: 0,
				/* 底部tabbar数组 */


				current1: 1,
				scrollHeight: 0,
				shopList: [],
				shopId: '',
				shopInfo: {},
				productList: [],
				userId: 1,
				cartActive: false, // 购物激活状态
				cartActiveImage: '../../static/images/cart/cart_active.png',
				cartImage: '../../static/images/cart/cart.png',
				buttomFlag: false, //底部购物车导航栏
				productNum: 0,
				totalPrice: 0,
				pageNum: 1,
				pageSize: 199,
				cartList: '',
				popUpFlag: false,
				sty: "fadeInUp",
				popUpList: ''





			}
		},
		onLoad(option) {
			this.shopId = option.shopId
			if (uni.getStorageSync('token') != '') {
				this.getCartList(shopId)
			}
		},
		onShow() {
			this.getShopInfo()
			this.getProductList()
			if (uni.getStorageSync('token') != '') {
				this.pupUpList()
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.shopHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个


				}
			})
		},
		methods: {
			clearCart() {
				this.$api.clearCart({
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						this.getProductList()
						this.cartActive = false
						this.popUpFlag = !this.popUpFlag
					}
					console.log("=====" + JSON.stringify(JSON.stringify(res)))

				})

			},
			open(cartActive) {
				if (!cartActive) {
					uni.showToast({
						title: '购物车还没有任何东西！',
						duration: 1500,
						icon: "none"
					});
					return
				}
				this.popUpFlag = !this.popUpFlag

			},
			pupUpList() {
				this.$api.getCartList({
					shopId: this.shopId
				}).then((res) => {
					this.popUpList = res.data.data[0].data
					console.log("=====" + JSON.stringify(this.popUpList))

				})
			},
			look() {
				uni.showToast({
					title: '功能暂未开放！',
					duration: 1500,
					icon: "none"
				});
			},
			initStyle(shopId) {
				//获取购物车信息
				if (uni.getStorageSync('token') != '') {
					this.getCartList(shopId)
				} else {
					this.buttomFlag = true
					this.cartActive = false
				}


			},
			getCartList(shopId) {
				this.$api.getCartList({
					shopId: shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.buttomFlag = true
						this.cartList = res.data.data
						if (this.cartList.length > 0) {
							this.cartActive = true
							this.cart = this.cartList[0] //单个商家购物车信息
							for (var i = 0; i < this.cart.data.length; i++) {
								this.productNum = this.cart.data[i].number + this.productNum
								this.totalPrice = this.totalPrice + (Number(this.cart.data[i].goodsPrice) * Number(
									this.cart.data[i].number))
							}

						} else {
							this.cartActive = false
						}
					}
				})
			},
			affirmOrder(cartActive, shopId) {
				let _this = this
				//判断当前提交按钮状态
				if (!cartActive) {
					uni.showToast({
						title: '您还没有添加任何商品！',
						duration: 1500,
						icon: "none"
					});
					return
				}

				// 获取是否有商品
				this.$api.getCartList({
					shopId: shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.cartList = res.data.data
						console.log(JSON.stringify(this.cartList.data))
						if (this.cartList.length > 0) {
							let parameter = {
								ids: [],
								isDispatching: this.shopInfo.isDispatching,
							}
							for (var i = 0; i < this.cartList[0].data.length; i++) {
								parameter.ids.push(this.cartList[0].data[i].goodsId)

							}
							if (this.shopInfo.isDispatching == 1) {
								uni.navigateTo({
									url: '../order/address-order?shopId=' + shopId
								});
							} else {
								_this.$api.subOrder(parameter).then((res) => {
									// uni.hideLoading()
									if (res.data.code == 200) {
										//订单提交成功 开始支付
										const parameter = {
											"orderNo": res.data.data.orderNumber
										}
										_this.payOrder(parameter)
									}
								})

							}



						} else {
							uni.showToast({
								title: '您还没有添加任何商品！',
								duration: 1500,
								icon: "none"
							});
						}
					}
				})

			},
			payOrder(parameter) {
				this.$api.payOrder(parameter).then((res) => {
					this.price = 0
					if (res.data.code == 200) {
						uni.showToast({
							title: '支付成功',
							duration: 1000,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateTo({
								url: '../pay/pay-state'
							});
						}, 1200);

					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1000,
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateTo({
								url: '../pay/pay',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});

						}, 1000);
					}

				})

			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.phone //仅为示例
				});
			},
			async addSubtractPopUpList(status, product, index) {
				await this.$api.addSubtractProduct({
					goodsId: product.goodsId,
					status: status
				}).then((res) => {
					if (res.statusCode == 200 && res.data.code == 200) {
						//数量增加
						console.log(JSON.stringify(this.productList))
						this.popUpList[index].number = this.popUpList[index].number + (status)
						this.productNum += Number(status)
						if (status > 0) {
							this.totalPrice += Number(product.goodsPrice)
						} else {
							this.totalPrice -= Number(product.goodsPrice)
							if (this.productNum == 0) {
								this.cartActive = false
								this.popUpFlag = !this.popUpFlag
							}
						}
						this.getProductList(1)
					}

				})

			},
			async addSubtractProduct(status, product, index) { //goodsId
				await this.$api.addSubtractProduct({
					goodsId: product.goodsId,
					status: status
				}).then((res) => {
					if (res.statusCode == 200 && res.data.code == 200) {
						this.pupUpList()
						//单个商品数量增加
						this.productList[index].number = this.productList[index].number + status;
						//总数增加
						this.productNum += Number(status)
						if (this.productNum <= 0) {
							this.cartActive = false
						} else {
							this.cartActive = true
						}
						if (status > 0) {
							this.totalPrice += product.price
						} else {
							this.totalPrice -= product.price
						}
					}

				})

			},

			getProductList(type) {
				this.productList = []
				this.$api.getProductList({
					shopId: this.shopId
				}, this.pageNum, this.pageSize).then((res) => {
					if (res.statusCode == 200) {
						this.productList = res.data.data.list
						console.log(this.productList)
						if (type != 1) {
							this.productNum = 0
							this.totalPrice = 0
						}
						uni.hideLoading()
					}
				})
			},
			//获取商家信息
			getShopInfo() {
				this.$api.getShopInfo({
					shopId: this.shopId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.shopInfo = res.data.data
						uni.hideLoading()
					}
				})


			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.operation text {
		text-align: center;

	}

	.operation text:nth-child(2) {
		font-size: 30rpx;
		line-height: 70rpx;
	}

	.operation text:first-child {
		width: 60rpx;
		color: #FF5551;

	}

	.operation text:last-child {
		width: 60rpx;
		color: #FF5551;

	}

	.product-name text:first-child {
		font-size: 30rpx;
		font-weight: 600;

	}

	.product-name text:last-child {
		color: #FF5551;
	}

	.product-name {
		margin-left: 20rpx;
		padding: 5rpx 0rpx;
	}

	.clear-cart {
		font-size: 22rpx;
		color: #999999;
	}

	.clear-cart text {
		padding: 0 5rpx;
	}

	.title {
		padding: 10px 25rpx;
	}

	.product-list {
		padding: 0rpx 25rpx;
		margin-bottom: 15rpx;
	}

	.product-logo image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
	}

	.popo {
		position: fixed;
		width: 100%;
		background-color: rgba(255, 255, 255, 1);
		bottom: 132rpx;
		z-index: 101;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.card2 {
		z-index: 2;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);

	}

	.attract {
		margin-top: 5rpx;
		height: 80rpx;
		background-color: #463636;
		padding: 0rpx 30rpx;
		border-radius: 12rpx;
	}

	.attract text {
		color: #FF7E51;

	}

	.attract text:last-child {
		padding: 0rpx 20rpx;
		border: #FF7E51 solid 2rpx;
		border-radius: 50rpx;
	}

	.mini-price {
		font-size: 24rpx;
		color: #999999;
	}

	.bottom-list3 {
		background-color: #FF5551;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border: solid 2rpx #FF5551;
	}

	.bottom-list3 text {
		font-size: 30rpx;
	}

	.bottom-list2 {
		padding-left: 38rpx;
	}

	.bottom-list2 text:last-child {
		font-size: 20rpx;
	}

	.bottom-list2 text:first-child {
		font-size: 31rpx;
	}

	.bottom-list1 text {
		position: absolute;
		left: 120rpx;
		top: -10rpx;
		border-radius: 50rpx;
		background-color: #FF5551;
		font-size: 20rpx;
		width: 36rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
	}

	.bottom-list1 image {
		width: 145rpx;
		height: 120rpx;
		margin-top: -20rpx;
		position: relative;
	}

	.bottom2 {
		height: 140rpx;
		background-color: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		z-index: 102;
	}

	.bottom1 {
		height: 140rpx;
	}

	.bottom {
		position: fixed;
		bottom: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background-color: #463636;
		border-radius: 54rpx;
		margin-left: 30rpx;
		color: #ffffff;
	}

	.shop-logo-box {
		background-color: #007AFF;
	}

	.num {
		font-size: 35rpx;
		margin: 5rpx 20rpx 0rpx 20rpx;
	}

	.iconminus-opp {
		font-size: 40rpx;
	}

	.iconjia1 {
		font-size: 40rpx;
	}

	.integral {
		position: -webkit-sticky;
		/* Safari */
		position: sticky;
		top: 0;
		background-color: #FFFFFF;
		z-index: 10;
	}

	.integral text {
		font-size: 40rpx;
		font-weight: 600;
		color: #434343;

	}

	.tag-text {
		padding: 0rpx 0rpx;
		color: #a5a5a5
	}

	.tag-box {
		margin-left: 18rpx;
		flex-wrap: wrap;
	}

	.tag {
		margin: 10rpx 10rpx;
		flex-wrap: wrap;
		justify-content: space-around;
		border-radius: 8rpx;
		border: solid #9e9e9e 3rpx;

	}

	.iconqianjin {
		position: absolute;
		right: 20rpx;
		color: #838383;
	}

	.desc {
		margin-left: 14rpx;
	}

	.icon {
		color: #FF5551;
		margin-left: 26rpx;
	}

	.phone {
		border-radius: calc(50rpx);
		width: 74rpx;
		background: #FF5551;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		right: 30rpx;
		top: 30rpx;

	}

	.shop-title {
		font-size: 38rpx;
		font-weight: 600;
		margin-top: 50rpx;
		margin-left: 30rpx;
		color: #505050;

	}

	.link2 {
		margin: 0 auto;
		width: 390px;
		height: 3rpx;
		margin-top: 14rpx;
		background: #d6d6d6;
	}

	.link {
		margin: 0 auto;
		width: 300px;
		height: 2rpx;
		margin-top: 14rpx;
		background: #ebebeb;
	}

	.box {
		flex-direction: row;
		display: flex;
	}

	.box-c {
		flex-direction: column;
		display: flex;
	}

	.product-logo {
		width: 150rpx;
		height: 150rpx;
		margin-top: 10rpx;
		border-radius: 15rpx;
	}


	.shop-logo {
		border: #EEEEEE 1rpx solid;
		width: 140rpx;
		height: 140rpx;
		margin-left: 40rpx;
		margin-top: -40rpx;
		border-radius: 10rpx;


	}

	.shop-logo-box {
		width: 150rpx;
		height: 150rpx;
		margin-left: 40rpx;
		margin-top: -40rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.card {
		z-index: 99;


		-moz-box-shadow: #d5d5d5 0px 0px 1px;
		/*firefox*/
		-webkit-box-shadow: #909090 0px 0px 1px;
		/*safari或chrome*/
		box-shadow: #bebebe 0px 0px 5px;
		/*opera或ie9*/
	}

	.card1 {

		-moz-box-shadow: #d5d5d5 0px 0px 0px;
		/*firefox*/
		-webkit-box-shadow: #ececec 0px 0px 0px;
		/*safari或chrome*/
		box-shadow: #bebebe 2px 1px 1rpx;
		/*opera或ie9*/
	}

	.tabbar {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}


	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FF5551;
	}
</style>
